<template>
  <!-- 饼图--带背景 -->
  <div id="chartPie1"></div>
</template>

<script>
export default {
  components: {},
  props: ['chartData'],
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {
    console.log('chartData1:',this.chartData);
    this.getEchartData()
  },
  methods: {
    getEchartData(){
      let chartDom = document.getElementById("chartPie1");
      let chart = this.$echarts.init(chartDom);
      const yData2 = this.chartData.value;
      const num = this.chartData.ratio;
      console.log(yData2,num);

      let option = {
        legend: {
          type: "scroll",
          pageIconSize: 14,
          pageButtonItemGap: 1,
          orient: "vertical",
          left: "40%",
          top: "35%",
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          formatter: function (name) {
            return `{a|未开始} {b|${num}}{c|次}`;
          },
          textStyle: {
            rich: {
              a: {
                width: 80,
                color: "#1D4A77",
                fontSize: 16,
              },
              b: {
                width: 40,
                color: "#0286CB",
                fontSize: 20,
              },
              c: {
                width: 20,
                color: "#0286CB",
                fontSize: 16,
              }
            },
          },
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: require('../../assets/repCon/pie-legend-bg.png'),
                width: 189,
                height: 40,
                zIndex: 2,
                top: "center"
              },
              left: '150',
              top: 'center',
            },
            {
              type: 'image',
              style: {
                image: require('../../assets/repCon/pie-bg.png'),
                width: 95,
                height: 95,
                zIndex: 2,
                top: "center"
              },
              left: '20',
              top: 'center',
            },
          ],
        },
        series:[
          {
            type: "pie",
            center: ["17%", "50%"],
            radius: ['80%', '60%'],
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            data: [
              {
                value: yData2,
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 13,
                  fontWeight: 'bold',
                  formatter: function (o) {
                    return (`{value|${yData2}%}`);
                  },
                  rich: {
                    value: {
                      color: '#5A7FAE',
                      fontSize: 18,
                      fontWeight: 'bold',
                      padding: [15, 0, 5, 0],
                    }
                  }
                },
                itemStyle: {
                  shadowBlur: 1,
                  shadowColor: '#E6A37F',
                  color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
                      { offset: 0, color: 'rgba(230, 163, 127, 1)' },
                      { offset: 1, color: 'rgba(230, 164, 129, 1)' },
                    ],
                    global: false
                  },
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 100 - yData2,
                label: {
                  show: false,
                },
                itemStyle: {
                  shadowBlur: 1,
                  shadowColor: '#E6F4FF',
                  color: 'rgba(64, 158, 255, 0.1)',
                },
              },
            ],
          },
          // 中心效果圆
          {
            type: "pie",
            startAngle: 0,
            center: ["17%", "50%"],
            radius: "59%",
            clockWise: true,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                labelLine: {
                  show: false
                },
                color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  { offset: 1, color: "rgba(230, 244, 255, 1)" },
                  { offset: 0.6, color: "rgba(230, 244, 255, 0.5)" },
                  { offset: 0.2, color: "rgba(230, 244, 255, 0.2)" },
                  { offset: 0, color: "rgba(230, 244, 255, 0)" },
                ]),
                shadowBlur: 1,
                shadowColor:'#fff'
              }
            },
            data: [
              { value: 100 }
            ]
          },
        ],
      };
      chart.setOption(option);
      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#chartPie1{
  width: 100%;
  height: 100%;
}
</style>